<template>
	<view class="box_doc">
		<view class="h3">TypeScript学习笔记</view>
		<view class="tip">介绍</view>
		<view class="text">
			TypeScript 是 JavaScript 的一个超集。TypeScript 是一门不同于JavaScript 的新语言，但它可以编译成 JavaScript 在浏览器中运行。
		</view>
		<view class="tip">一、相对于JavaScript的，typescript的优势</view>
		<view class="text">
			1、在JS 有的基础类型，它都有；JS 没有的基础类型，他也有。<br />
			2、增强代码的可读性。类型定义，要求开发人员必须定义属性（变量）的类型，使得属性（变量）的使用更规范，数据交互更安全 <br />
			3、增强代码的可维护性。它的类型在编译时即可发现大部分的错误，可在运行代码之前就找到错误并提供修复，改善开发体验
		</view>
		<view class="tip">二、ts的编译安装</view>
		<view class="text">
			1、npm install -g typescript <br />
			2、tsc 指向ts结尾的文件 借助vscode编译器进行编译 ：<br /> （1）、tsc --init 生成 tsconfig.json <br />（2）、tsc -w // 监听入口文件变化
		</view>
		<view class="tip">三、ts的数据类型</view>
		<view class="text">1.布尔类型</view>
		<zero-markdown-view :markdown="content[0]"></zero-markdown-view>
		<view class="text">2.数字类型</view>
		<zero-markdown-view :markdown="content[1]"></zero-markdown-view>
		<view class="text">3.字符串类型</view>
		<zero-markdown-view :markdown="content[2]"></zero-markdown-view>
		<view class="text">4.数组类型</view>
		<zero-markdown-view	:markdown="content[3]"></zero-markdown-view>
		<view class="text">5.tuple 元组类型 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同</view>
		<view class="text">6.enum 枚举类型</view>
		<zero-markdown-view :markdown="content[4]"></zero-markdown-view>
		<view class="text">7.Any 任意类型</view>
		<view class="text">8.Void 类型 用于函数没有返回值</view>
		<view class="text">9.null 和 undefined</view>
		<view class="text">10.Never 表示的是那些永不存在的值的类型</view>
		<view class="text">11.object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。</view>
		<view class="tip">四、类成员修饰符</view>
		<view class="bold">public：公有 在类里面，子类和类外面都可以访问</view>
		<view class="text">1.自身调用</view>
		<view class="text">2.子类可以调用</view>
		<view class="text">3.实例调用</view>
		<view class="bold">protected：保护类型 在类里面、子类里面可以访问，在类外部没法访问</view>
		<view class="text">1.自身调用</view>
		<view class="text">2.子类可以调用</view>
		<view class="bold">private：私有 在类里面可以访问，子类和类外部都没法访问</view>
		<view class="text">1.自身调用</view>
		<zero-markdown-view :markdown="content[5]"></zero-markdown-view>
		<zero-markdown-view :markdown="content[6]"></zero-markdown-view>
	  <zero-markdown-view :markdown="content[7]"></zero-markdown-view>
	  <view class="tip">五、函数</view>
	  <zero-markdown-view :markdown="content[8]"></zero-markdown-view>
		<view class="bold">interface接口 ：可以用来约束一个函数，对象，以及类的结构和类型</view>
		<zero-markdown-view :markdown="content[9]"></zero-markdown-view>
	  <view class="tip">六、基于vue2.0开发</view>
		<view class="text">1.安装vue/cli</view>
		<zero-markdown-view :markdown="content[10]"></zero-markdown-view>
		<view class="text">2.通过vue create创建项目</view>
		<zero-markdown-view :markdown="content[11]"></zero-markdown-view>
		<view class="text">3.选择typescript模板</view>
    <img class="base_img" src="https://p.ipic.vip/hash2l.png" alt="">
		<view class="text">4.Cli之后，接下来需要安装一些可能需要的插件</view>
    <view class="li">vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件</view>
    <view class="li">vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器</view>
    <view class="li">ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件</view>
    <view class="li">tslint-loader跟tslint：我想你也会在.ts .tsx文件 约束代码格式（作用等同于eslint）</view>
    <view class="li">tslint-config-standard：tslint 配置 standard风格的约束</view>
	  <view class="tip">七、基于uniapp开发</view>
		<view class="text">1.执行如下命令来初始化一个新项目</view>
		<zero-markdown-view :markdown="content[12]"></zero-markdown-view>
		<view class="text">2.选择typescript模板</view>
		<view class="text">3.运行到微信小程序</view>
		<zero-markdown-view :markdown="content[13]"></zero-markdown-view>
    <!-- <zero-markdown-view markdown="\n参数|类型|可选|默认值|说明\n:--:|:--:|:--:|:--:|:--:\npadding|EdgeInsetsGeometry|必填|--|用于设置内边距，其实是设置child的外边距。\nchild|Widget|是|--|子元素。\n"></zero-markdown-view> -->
    <!-- <zero-markdown-view markdown="```js\n\n```"></zero-markdown-view> -->
    
	</view>
</template>
<script>
	export default{
		data(){
			return{
				content:[
					"```js\nlet isFlag: boolean = false;\n```",
					"```js\nlet decLiteral: number = 6;\n```",
				  "```js\nlet name: string = 'bob';\n```",
					"```js\nlet list: number[] = [1, 2, 3]; \nlet list: Array< number > = [1, 2, 3];\n```",
					"```js\nenum sex{ man=1,woman=2 }\n```",
					"```js\n// public\n// 属性不加任何修饰符为public\n\n // 类外部访问公有属性\n \nclass Person {\n public name: string;\n   constructor(name:string) {\n    this.name = name;\n  }\n }\nvar p = new Person('lala');\nconsole.log(p.name)\n```",
					"```js\n  // protected\n // 在子类中访问\n class Person {\n 	protected name: string; // 属性，省略了public关键词\n 	constructor(name:string) { // 构造函数，实例化类时触发的方法\n 		this.name = name;\n 	}\n }\n class Web extends Person {\n 	constructor(name: string) {\n 		super(name)\n 	}\n 	run():string {\n 		return `${this.name}lalalla`\n 	}\n }\n var w = new Web('ab');\n console.log(w.run())\n```",
					"```js\n  // private 只能在类内部访问\nclass Person {\n	private name: string; // 属性，省略了public关键词\n	constructor(name:string) { // 构造函数，实例化类时触发的方法\n		this.name = name;\n	}\n}\n```",
					"```js\n// 函数声明\nfunction run():string {\n    return '123'\n}\n\n// 匿名表达式\nvar run2 = function():string {\n    return '123'\n}\n\n// ts中定义方法传参\nfunction getInfo(name: string, age: number):string {\n    return `${name}:${age}`\n}\n\n// 方法可选参数(age可传，可不传)\n// 可选参数要放在所有参数的最后\nfunction getInfo(name: string, age?: number):string {\n    if (age) {\n        return `${name}:${age}`\n    }\n    return `${name}`\n}\n\n// 默认参数\nfunction getInfo(name: string, age: number = 20):string {\n    if (age) {\n        return `${name}:${age}`\n    }\n    return `${name}`\n}\n\n// 剩余参数\nfunction sum(a: number, b:number, c:number, d:number):number {\n    return a + b + c + d;\n}\n可改为\nfunction sum(...res: number[]):number {\n  return res.reduce((acc, cur) => acc + cur, 0)\n}\n```",
					"```js\ninterface Person {\n    firstName: string\n    lastName: string\n}\nfunction greeter(person: Person) {\n    return `Hello ${person.firstName} + ${person.lastName}`\n}\nlet user = {\n    firstName: 'zhangsan',\n    lastName: 'lisi'\n}\nconsole.log(greeter(user))\n```",
					"```js\nnpm install -g @vue/cli\n# OR\nyarn global add @vue/cli\n```",
					"```js\nvue create tsDemo\n```",
					"```js\nvue create -p dcloudio/uni-preset-vue my-ts-uni\n```",
					"```js\n'scripts': {\n    'serve': 'npm run dev:h5',\n    'build': 'npm run build:h5',\n    ...\n    'build:mp-weixin': 'cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build',\n    ...\n    'dev:mp-weixin': 'cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch',\n   ...\n}\n```",
				]
			}
		}
	}
</script>
<style lang="less" scoped>
	.box_doc {
		width: 100vw;
		height: 100vh;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
</style>